<template>
<!--  最外层使用 el-container容器-->
  <el-container class="main_container">
<!-- 1.头部区域-->
    <el-header>
<!--      在头部左侧是公司的logo图片-->
      <img src="../assets/image/cs_logo.png">
<!--    在头部右侧是  个人信息(用户头像,用户名)-->
      <el-dropdown style="padding-right: 5px">
        <div>
<!--          用户图像-->
          <el-avatar :src="userAvatar" style="cursor: pointer;width: 40px;height: 40px;"></el-avatar>
<!--          用户名称-->
          <span class="user-name">{{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </div>
<!--        下拉菜单-->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-user">用户信息</el-dropdown-item>
          <el-dropdown-item icon="el-icon-edit-outline">修改用户</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus-outline"><span @click="logout">退出登录</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <!--  2.左侧栏-->
      <el-aside :width="isOpen === true ?'65px':'200px'">
        <div class="toggleBth" @click="changeToggle">
          <i :class="change_toggle"></i>
        </div>

        <el-menu
          :collapse="isOpen"
          :router="true"
          :default-active="activePath"
          background-color="#222653"
          :collapse-transition="false"
          text-color="rgba(255,255,255,0,7)"
          unique-opened>
          <!--3.使用MenuTree菜单组件-->
          <MenuTree :menuList = "this.menuList"></MenuTree>
        </el-menu>
      </el-aside>
      <!--  3.中间内容区域-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 1.导入树形菜单组件
import MenuTree from '../components/MenuTree'
import MenuJson from '../assets/json/menuJson.json'
export default {
  name: 'DashBook',
  // 2.注册MenuTree组件到Vue 实例对象里面去
  components: { MenuTree },
  data () {
    return {
      userAvatar: 'http://thirdqq.qlogo.cn/g?b=oidb&k=icTYjyV5afABvE1v4ge9SLg&s=100&t=1584195695',
      userName: 'admin',
      change_toggle: 'el-icon-s-fold',
      isOpen: false,
      menuList: [],
      activePath: ''
    }
  },
  mounted() {
    let user = LocalStorage.get("setUserInfo")
    // console.log(user)
    this.userAvatar = user.avatar
    this.userName = user.nickname
    if(!user.nickname || user === undefined){
      this.$router.push('/login')
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    async logout(){
      await this.$confirm(  "此操作将退出系统,是否继续?", {
        confirmButtonText:"确定",
          cancelButtonText: "取消",
          type: 'warning'
      }).catch(() =>{
        this.$message({
          type: "error",
           message:"已取消此操作"
        })
      })
      if(con === "confirm"){
        LocalStorage.clearAll()
        await this.$router.push('/login')
      }
    },
    getMenuList(){
      this.$http.get('system/user/findMenu').then(res =>{
        console.log("获取的菜单数据为======:", +res.data.data)
        if(res.data.success){
          this.menuList = res.data.data
        }else {
          this.$message.error("获取菜单数据失败",res.data.msg)
        }
      })
    },
    changeToggle () {
      this.isOpen = !this.isOpen
      if (this.isOpen) {
        this.change_toggle = 'el-icon-s-unfold'
      } else {
        this.change_toggle = 'el-icon-s-fold'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .main_container{
  height: 100vh;
    width: 100%;
}
  .el-header{
    z-index:100;
    box-shadow: 0 0 5px lawngreen;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color:#FFFFFF;
    padding: 3px 5px 3px 10px;
    img{
      width: 170px;
      height: 60px;
    }
    .user-name{
      top:-15px;
      position: relative;
      margin-left: 5px;
      text-align: center;
      color: black;
      font-size: 15px;
    }
  }
  .el-aside{
    background-color: #222653;
    .toggleBth{
      border:none;
      padding-right: 5px;
      font-size: 20px;
      line-height: 30px;
      color: #FFFFFF;
      text-align: right;
      cursor: pointer;
      border-bottom: solid 1px #FFFFFF;
    }
    .el-menu{
      height: 100vh;
      border: none;
    }
  }

</style>
